<div class="layui-form-item">
    <label class="layui-form-label {$form['extra_class']}" for="{$form['name']}">
        {if condition="is_int(strpos($form['extra_attr'], 'required'))"}
        <span class="text-danger">*</span>
        {/if}
        {$form['title']}
    </label>
    <input style="display: inline-block;width: 75%;"
           placeholder="{$form['tip'] ?? ''}"
           type="hidden"
           value="{$form['value'] ?? ''}"
           id="{$form['name']}"
           name="{$form['name']}"
           class="layui-input"
           {$form['extra_attr']}
    ／>

    <?php $form['value'] = empty($form['value']) ? [] : explode('|', $form['value']);?>
    <div class="layui-input-block">
        <div class="layui-row pictures-url" id="{$form['name']}-pictures-preview">
            <div class="layui-col-xs1">
                <div id='picker-{$form["name"]}' style="border: 1px dashed #e2e2e2;width: 100px;height: 100px;text-align: center;">
                    <i class="layui-icon layui-icon-add-1" style="font-size: 50px;color: #e2e2e2;margin-top: 20px;display: inline-block;"></i>
                </div>
            </div>
            {volist name="form.value" id="src"}
            <div class="layui-col-xs1 picture-item">
                <img src="{$src}" alt="">
                <span class="icon-remove"><i class="fa fa-remove"></i></span>
            </div>
            {/volist}
        </div>
    </div>

    <style>
        .pictures-url img{width: 95%;}
        .pictures-url .picture-item{ text-align: right;position: relative;}
        .pictures-url .picture-item img{width: 100px;height: 100px;}
        .pictures-url .icon-remove{
            position: absolute;
            right: -3px;
            font-size: 18px;
            top: -7px;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background-color: gray;
            color: #fff;
            text-align: center;
        }
    </style>

    <script>
        layui.use(['upload', 'jquery'], function () {
            var upload = layui.upload
                    , $ = layui.jquery;

            var upload_index;
            upload.render({
                elem: '#picker-{$form["name"]}'
                ,url: '{:url("uploader/picturePost")}'
                ,multiple: true
                ,accept: 'image' //允许上传的文件类型
                ,size: "{$form['options']['size'] ? $form['options']['size'] : (dao_config('system.upload.image_size') ? dao_config('system.upload.image_size')/1000 : 2048)}" //最大允许上传的文件大小
                ,exts: "{$form['options']['ext'] ? $form['options']['ext'] : (dao_config('system.upload.image_ext') ? dao_config('system.upload.image_ext') : 'jpg,png,jpeg')}".split(',').join('|')
                ,before: function () {
                    upload_index = layer.load(1);
                }
                ,done: function(res, index, upload){ //上传后的回调
                    if(res.code !== 1){
                        layer.alert(res.msg);
                        return;
                    }
                    var v = $("#{$form['name']}").val();
                    var urls = v ? v.split('|') : [];
                    urls.push(res.data[0].url);
                    $("#{$form['name']}").val(urls.join('|'));

                    $("#{$form['name']}-pictures-preview").append('<div class="layui-col-xs1 picture-item">\n' +
                            '                <img src="'+res.data[0].url+'" alt="" >\n' +
                            '<span class="icon-remove"><i class="fa fa-remove"></i></span>\n' +
                            '            </div>');
                }
                , allDone: function () {
                    layer.close(upload_index);
                }
            });

            $(function () {
                //移除图片
                $("#{$form['name']}-pictures-preview").on('click', '.fa-remove', function () {
                    var v = $("#{$form['name']}").val();
                    var urls = v ? v.split('|') : [];
                    var target = $(this).parents('.picture-item').find('img').attr('src');
                    for (let i = 0, count=urls.length; i < count; i++) {
                        if (urls[i] == target){
                          urls.splice(i, 1)
                          break
                        }
                    }
                    $("#{$form['name']}").val(urls.join('|'));
                    $(this).parents('.picture-item').remove();
                });

                //点击预览
                $("#{$form['name']}-pictures-preview").on('click', '.picture-item img',function () {
                    var currentSrc = $(this).attr('src')
                    , urls = $("#{$form['name']}").val().split('|')
                    , data = []
                    , start = 0;

                    for(var i = 0; i < urls.length; i++){
                        data.push({
                            "alt": urls[i],
                            "pid": urls[i], //图片id
                            "src": urls[i], //原图地址
                            "thumb": urls[i] //缩略图地址
                        });
                        if(urls[i] === currentSrc){
                            start = i;
                            console.log(start);
                        }
                    }
                    layer.photos({
                        photos: {
                            "start": start, //初始显示的图片序号，默认0
                            "data": data
                        }
                        ,anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                });
            });
        });
    </script>
</div>